import { uid } from '@/utils';
import { useState, useEffect } from 'react';
import classNames from 'classnames';
import React, { useRef } from 'react';
import ReactDOM from 'react-dom';
import styles from './index.less';

interface OriginPreviewImgProps {
  container?: HTMLElement;
  visible: boolean;
  defaultIndex?: number;
  data: string[];
  onClose?: () => void;
  destroyOnClose?: boolean;
}

const OriginPreviewImg: React.FC<OriginPreviewImgProps> = ({
  container = document.body,
  visible,
  data = [],
  defaultIndex = 0,
  onClose,
  destroyOnClose = false,
}) => {
  const [index, setIndex] = useState(defaultIndex);
  const videoRef = useRef<HTMLVideoElement>(null);
  if (destroyOnClose && !visible) {
    return null;
  }
  useEffect(() => {
    if (visible === true) {
      // window.scrollTo({
      //     left: 0,
      //     top: 0,
      //     behavior: 'smooth'//或'auto'
      // });
    }
  }, [visible]);

  const handlePrev = () => {
    if (index > 0) {
      setIndex(index - 1);
    }
  };
  const handleNext = () => {
    if (index < data.length - 1) {
      setIndex(index + 1);
    }
  };

  const content = (
    <div className={classNames(styles.previewImg)} style={{ display: visible ? 'block' : 'none' }}>
      <i className={styles.mask} onClick={() => onClose?.()} />
      <div className={styles.main}>
        <div className={styles.imgWrapper}>
          <img loading="lazy" className={styles.img} src={data[index]} alt="" />
          <img
            loading="lazy"
            className={styles.close}
            src={require('./images/icon-close.png')}
            alt=""
            onClick={() => onClose?.()}
          />
          {data.length > 1 && (
            <>
              <i
                className={classNames(styles.prve, { [styles.disabled]: index === 0 })}
                onClick={handlePrev}
              />
              <i
                className={classNames(styles.next, {
                  [styles.disabled]: index === data.length - 1,
                })}
                onClick={handleNext}
              />
            </>
          )}
          {data.length > 1 && (
            <div className={styles.footer}>
              <span className={styles.current}>{index + 1}</span> / {data.length}
            </div>
          )}
        </div>
      </div>
    </div>
  );
  return ReactDOM.createPortal(
    // 这里可以是dom元素,也可以是react组件,还可以是react节点
    content,
    // 将传入的元素/组件/节点,挂载到container下面
    container,
  );
};

// 点赞
const showStar = (options: Pick<OriginPreviewImgProps, 'data' | 'onClose' | 'defaultIndex'>) => {
  const { data = [], defaultIndex, onClose } = options || {};
  const container = document.createElement('div');
  container.setAttribute('id', uid() + '' + Date.now());
  document.body.appendChild(container);
  const handleClose = () => {
    onClose?.();
    ReactDOM.unmountComponentAtNode(container);
    document.body.removeChild(container);
  };
  ReactDOM.render(
    <OriginPreviewImg
      type="star"
      data={data}
      defaultIndex={defaultIndex}
      container={container}
      visible={true}
      destroyOnClose
      onClose={handleClose}
    />,
    container,
  );
};

// 评分
const showScore = (options: Pick<OriginPreviewImgProps, 'data' | 'onClose' | 'defaultIndex'>) => {
  const { data = [], defaultIndex, onClose } = options || {};
  const container = document.createElement('div');
  container.setAttribute('id', uid() + '' + Date.now());
  document.body.appendChild(container);
  const handleClose = () => {
    onClose?.();
    document.body.removeChild(container);
  };

  ReactDOM.render(
    <OriginPreviewImg
      type="score"
      data={data}
      defaultIndex={defaultIndex}
      container={container}
      visible={true}
      onClose={handleClose}
    />,
    container,
  );
  window.scrollTo({
    left: 0,
    top: 0,
  });
};

const show = (options: Pick<OriginPreviewImgProps, 'data' | 'onClose' | 'defaultIndex'>) => {
  const { data = [], defaultIndex, onClose } = options || {};
  const container = document.createElement('div');
  container.setAttribute('id', uid() + '' + Date.now());
  document.body.appendChild(container);
  const handleClose = () => {
    onClose?.();
    document.body.removeChild(container);
  };
  ReactDOM.render(
    <OriginPreviewImg
      type="video"
      data={data}
      defaultIndex={defaultIndex}
      container={container}
      visible={true}
      onClose={handleClose}
    />,
    container,
  );
};

type PreviewImgType = typeof OriginPreviewImg & {
  show: typeof show;
};
const PreviewImg = OriginPreviewImg as PreviewImgType;
PreviewImg.show = show;

export default PreviewImg;
